<template>
  <div class="pc-tokendetail inner-box">
    <bread :backTitle="$t('token.title')" backRouter="/token" :secTitle="$t('tokenDetail.title')"></bread>
    <token-info :infos="TokenInfo"></token-info>

    <div class="token-tx-record table-shadow">
      <div class="head flex-between">
        <div class="tab">
          <span :class="{'active-tab':tab===0}" @click="tabChange(0)">{{$t('blockDetail.record')}}</span>
          <span :class="{'active-tab':tab===1}" @click="tabChange(1)">{{$t('tokenDetail.holder')}}</span>
        </div>
        <el-input
          size="medium"
          :placeholder="$t('address.title')"
          suffix-icon="el-icon-search"
          v-model="searchAddress"
          class="adr-search"
          @keyup.enter.native="searchAdr"
        ></el-input>
      </div>
      <!-- Token交易 -->
      <token-tx
        v-if="tab===0"
        :isSearch="isSearch"
        :addr="propsAdr"
        :token="tokenName"
        :pages="pages"
        @clear="propsAdr=''"
      ></token-tx>
      <!-- Token持有人 -->
      <!-- :addr="propsAdr" -->
      <token-holder
        v-if="tab===1"
        :isSearch="isSearch"
        :totalHolder="TokenInfo.holders"
        :pages="pages"
        :infos="TokenInfo"
      ></token-holder>
    </div>

    <!-- 底部分页 -->
    <div class="bottom-page flex-right">
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="pages.currentPage"
        :pageSize="pages.pageSize"
        :total="pages.total"
      ></page-container>
    </div>
  </div>
</template>

<script>
import Bread from "@/components/computer/Breadcrumb.vue";
import TokenInfo from "./TokenInfos";
import TokenTx from "./TokenTx";
import TokenHolder from "./TokenHolder";
import PageContainer from "@/components/computer/PageContainer.vue";
import TokenDetailBase from "@/mixins/TokenDetail/tokenDetail.js";
export default {
  mixins: [TokenDetailBase],
  components: {
    Bread,
    TokenInfo,
    TokenTx,
    TokenHolder,
    PageContainer
  }
};
</script>

<style lang="scss">
.pc-tokendetail {
  .token-tx-record {
    margin-top: 30px;
    background: $white;
    border-radius: 2px;
    border: 1px solid rgba(235, 239, 241, 1);
    .head {
      height: 78px;
      padding: 0 25px;
      border-bottom: 1px solid #ececec;
      .tab {
        height: 100%;
        span {
          display: inline-block;
          height: 100%;
          width: 72px;
          line-height: 78px;
          font-size: 16px;
          font-family: PingFangSC-Semibold;
          font-weight: 500;
          text-align: center;
          color: $black;
          cursor: pointer;
          transition: 0.5s;
        }
        span:last-child {
          margin-left: 60px;
          width: 65px;
        }
        .active-tab {
          color: $blue;
          border-bottom: 2px solid $blue;
        }
      }
      .adr-search {
        width: 310px;
        input {
          border-radius: 50px;
        }
      }
    }
  }
  .bottom-page {
    margin-top: 23px;
  }
}
</style>
